<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> </title>
    <!-- CSS files 导入 -->
    <link th:href="@{/css/microphone.css}" rel="stylesheet" />
  </head>
  <body>
    <div class="page">
      <button type="button" id="microphone" class="btn btn-sm btn-block  microphone">
        <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="icon icon-table icons-table-filled icon-table-microphone">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path fill="transparent" stroke="#333333"
                  d="M19 9a1 1 0 0 1 1 1a8 8 0 0 1 -6.999 7.938l-.001 2.062h3a1 1 0 0 1 0 2h-8a1 1 0 0 1 0 -2h3v-2.062a8 8 0 0 1 -7 -7.938a1 1 0 1 1 2 0a6 6 0 0 0 12 0a1 1 0 0 1 1 -1m-7 -8a4 4 0 0 1 4 4v5a4 4 0 1 1 -8 0v-5a4 4 0 0 1 4 -4"
          />
        </svg>
      </button>
      <!-- Navbar -->
    </div>

    <!-- Libs JS -->
    <!-- 引入Jquery-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script>
      $(document).ready(() => {
        const microphoneElement = document.getElementById("microphone");

        function getRandomNumber() {
          return Math.floor(Math.random() * 101);
        }
        function onCall() {
          if (microphoneElement) {
            const volume = getRandomNumber();
            microphoneElement.style.background = `-webkit-linear-gradient(bottom, #0073e6 0%, #0073e6 ${volume}%, #ddd 50%, #ddd 100%)`; // 添加背景样式
          }
        }

        const startCall = setInterval(onCall, 200);

      });
    </script>
  </body>
</html>
